@extends('layouts.admin.application')
@section('css')
    <link rel="stylesheet" href="/vendor/nestable/jquery.nestable.css">
    <link rel="stylesheet" href="/vendor/markdown/css/editormd.min.css"/>
@endsection
@section('content')
    <div class="admin-content" id="app">

        <div class="am-cf am-padding">
            <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">课程章节管理</strong> /
                <small>Episode Manage</small>
            </div>
        </div>

        @include('layouts.admin.partials._flash')

        <div class="am-g">
            <div class="am-u-sm-12 am-u-md-6">
                <div class="am-btn-toolbar">
                    <div class="am-btn-group am-btn-group-xs">
                        <button type="button" class="am-btn am-btn-default" v-on:click="createParentEpisode">
                            <span class="am-icon-plus"></span> 新增一级章节
                        </button>
                        <button type="button" class="am-btn am-btn-secondary" v-on:click="compress">
                            <span class="am-icon-compress"></span> 折叠
                        </button>
                        <button type="button" class="am-btn am-btn-success" v-on:click="expand">
                            <span class="am-icon-expand"></span> 展开
                        </button>
                    </div>
                </div>
            </div>

            <div class="am-u-sm-12 am-u-md-3">
                <div class="am-form-group">
                    <select data-am-selected="{btnWidth: '80%',  btnStyle: 'secondary', btnSize: 'sm', maxHeight: 360, searchBox: 1}" name="category_id" id="change_category">
                        @foreach ($categories as $category)
                            <optgroup label="{{ $category->name }}">
                                @foreach ($category->children as $c)
                                    <option value="{{ $c->id }}" @if($c->id == Request::input('category_id')) selected @endif>
                                        {{ $c->name }}
                                    </option>
                                @endforeach
                            </optgroup>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>

        <hr>

        <div class="am-g">
            <div class="am-u-lg-4">
                <div class="dd" id="nestable">
                    <ol class="dd-list">
                        <li class="dd-item dd3-item" v-for="episode in episodes" :data-id="episode.id">
                            <div class="dd-handle dd3-handle">Drag</div>
                            <div class="dd3-content">
                                @{{episode.name}}
                                <div class="pull-right action-buttons">
                                    <a href="javascript:;" v-on:click="createEpisode(episode.id)"><i class="am-icon-plus"></i></a>
                                    <a href="javascript:;" v-on:click="editEpisode(episode.id)"><i class="am-icon-pencil"></i></a>
                                    <a href="javascript:;" v-on:click="destroyEpisode(episode.id)"><i class="am-icon-trash"></i></a>
                                </div>
                            </div>

                            <ol class="dd-list dd-hide" data-start-collapsed="true" v-if="episode.children != ''">
                                <li class="dd-item dd3-item" :data-id="c.id" v-for="c in episode.children">
                                    <div class="dd-handle dd3-handle">Drag</div>
                                    <div class="dd3-content">
                                        @{{c.name}} (浏览:@{{c.views}}次)
                                        <div class="pull-right action-buttons">
                                            <a href="javascript:;" v-on:click="editEpisode(c.id)"><i class="am-icon-pencil"></i></a>
                                            <a href="javascript:;" v-on:click="destroyEpisode(c.id)"><i class="am-icon-trash"></i></a>
                                        </div>
                                    </div>
                                </li>
                            </ol>
                        </li>
                    </ol>
                </div>
            </div>

            <div class="am-u-lg-8">
                <div class="am-panel am-panel-default">
                    <div class="am-panel-bd ">
                        <form class="am-form" v-on:submit.prevent="onSubmit" data-am-validator>
                            {{ csrf_field() }}
                            <div id="_method"></div>

                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                    上级章节
                                </div>
                                <div class="am-u-sm-8 am-u-md-10">
                                    <select v-model="episode.parent_id">
                                        <option value="0">顶级分类</option>

                                        <template v-for="episode in episodes">
                                            <option :value="episode.id">@{{episode.name}}</option>
                                        </template>
                                    </select>
                                </div>
                            </div>

                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                    章节名称
                                </div>
                                <div class="am-u-sm-8 am-u-md-10">
                                    <input type="text" class="am-input-sm" v-model="episode.name" id="name" placeholder="请输入分类名称" required>
                                </div>
                            </div>

                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                    作者
                                </div>
                                <div class="am-u-sm-8 am-u-md-10">
                                    <input type="text" class="am-input-sm" v-model="episode.author">
                                </div>
                            </div>

                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                    视频地址
                                </div>
                                <div class="am-u-sm-8 am-u-md-10">
                                    <input type="text" class="am-input-sm" v-model="episode.video" id="name" placeholder="请输入视频地址">
                                </div>
                            </div>

                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                    是否免费
                                </div>
                                <div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
                                    <label class="am-radio-inline">
                                        <input type="radio" value="1" name="is_onsale" v-model="episode.is_free"> 是
                                    </label>
                                    <label class="am-radio-inline">
                                        <input type="radio" value="0" name="is_onsale" v-model="episode.is_free"> 否
                                    </label>
                                </div>
                            </div>

                            <div class="am-g am-margin-top-sm">
                                <div class="am-u-sm-12 am-u-md-2 am-text-right admin-form-text">
                                    章节内容
                                </div>
                            </div>

                            <div class="am-g am-margin-top-sm">
                                <div class="am-u-sm-12 am-u-md-12">
                                    <div id="markdown">
                                        <textarea rows="10" name="content" style="display:none;"></textarea>
                                    </div>
                                </div>
                            </div>


                            <div class="am-margin">
                                <button type="submit" class="am-btn am-btn-primary am-radius" id="test">保 存</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="/vendor/nestable/jquery.nestable.js"></script>

    <script src="/vendor/markdown/editormd.min.js"></script>

    <script src="/vendor/vue/vue.js"></script>
    <script src="/vendor/vue/vue-resource.min.js"></script>
    <script>
        //排序
        $(function () {
            //切换栏目
            $("#change_category").change(function () {
                var category_id = $(this).val();
                if (category_id == "-1") {
                    location.href = "{{route('cms.article.index')}}";
                    return false;
                }
                var url = "/casts/episode?category_id=" + category_id;
                location.href = url;
            })

            $('.dd').nestable({
                maxDepth: 2,
            }).on('change', function () {
                var sort_order = window.JSON.stringify($('#nestable').nestable('serialize'));

                $.ajax({
                    type: 'PATCH',
                    url: '/casts/episode/sort_order',
                    data: {
                        sort_order: sort_order
                    },

                    success: function (data) {
                        if (data.status == 0) {
                            alert(data.msg);
                            return false;
                        }
                    }
                });
            });
        });

        Vue.use(VueResource);
        Vue.http.interceptors.push((request, next) => {
            request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);
            next();
        });

        var app = new Vue({
            el: '#app',
            data: {
                episodes: {!! $episodes !!},
                episode: {
                    parent_id: 0,
                    name: '',
                    content: '',
                    is_free: 1,
                    markdown_html_code: '',
                    author: '{{Auth::user()->real_name}}'
                },
                form_type: 'post',
                editor: null
            },
            mounted(){
                this.editor = editormd("markdown", {
                    path: "/vendor/markdown/lib/",
                    imageUpload: true,
                    imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                    imageUploadURL: "/vendor/markdown/php/upload.php",
                    saveHTMLToTextarea: true,//获得html
                    emoji: true,//表情
                    htmlDecode: "style,script,iframe|on*",
                    width: "100%",
                    height: "740",
                });
            },
            methods: {
                //展开
                compress: function () {
                    $('.dd').nestable('collapseAll');
                },
                //折叠
                expand: function () {
                    $('.dd').nestable('expandAll');
                },
                //重置当前编辑或修改的episode
                resetEpisode: function () {
                    this.episode = {
                        parent_id: 0,
                        name: '',
                        content: '',
                        is_free: 1,
                        markdown_html_code: '',
                        author: '{{Auth::user()->real_name}}'
                    }

                    this.form_type = 'post';
                    this.editor.setValue('');
                },
                //新增顶级episode
                createParentEpisode: function () {
                    this.resetEpisode();
                },
                //添加episode
                createEpisode: function (parent_id) {
                    this.resetEpisode();
                    this.episode.parent_id = parent_id;
                },
                //编辑episode
                editEpisode: function (id) {
                    this.form_type = 'put';

                    //ajax获取当前的episode
                    this.$http.get('/casts/episode/' + id + '/edit').then((response) => {
                        this.episode = response.body;
                        var content = response.body.content == null ? '' : response.body.content
                        this.editor.setValue(content);
                    });
                },
                onSubmit: function () {
                    if (this.episode.name == undefined) {
                        return false;
                    }

                    this.episode.content = this.editor.getMarkdown();         //获取 Markdown 源码
                    this.episode.markdown_html_code = this.editor.getHTML();  // 获取 Textarea 保存的 HTML 源码

                    //判断是新增还是修改
                    if (this.form_type == 'post') {
                        this.storeEpisode();
                    } else {
                        this.updateEpisode();
                    }
                },

                //保存episode
                storeEpisode: function () {
                    this.$http.post('/casts/episode?category_id={{$category_id}}', this.episode).then((response) => {
                        var data = response.body;
                        if (data.status == 0) {
                            alert(data.msg);
                            return false;
                        }
                        this.episodes = data.episodes;
                        var parent_id = this.episode.parent_id;
                        this.resetEpisode();
                        this.episode.parent_id = parent_id;
                    });
                },
                //更新episode
                updateEpisode: function () {
                    this.$http.put('/casts/episode/' + this.episode.id + '?category_id={{$category_id}}', this.episode).then((response) => {
                        var data = response.body;
                        if (data.status == 0) {
                            alert(data.msg);
                            return false;
                        }
                        this.episodes = data.episodes;
                    });
                },
                //删除episode
                destroyEpisode: function (id) {
                    this.$http.delete('/casts/episode/' + id + '?category_id={{$category_id}}').then((response) => {
                        var data = response.body;
                        if (data.status == 0) {
                            alert(data.msg);
                            return false;
                        }
                        this.episodes = data.episodes;
                    });
                }
            }
        })
    </script>
@endsection